﻿@model int
@{
    Layout = null;
}
<link href="/Administration/Content/zTree/css/demo.css" rel="stylesheet" />
<link href="/Administration/Content/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="/Administration/Content/zTree/js/jquery.ztree.core.js"></script>
<style type="text/css">
    .selectmenu {
        display: flex;
        align-items: center;
    }
    .selectmenu input {
        background-color: #fff !important;
    }
    .dropdown-btn {
        position: absolute;
        right: 0;
        z-index: 9;
    }
</style>
@Html.HiddenFor(model => model)
<div class="input-group selectmenu" onclick="showMenu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))();">
    <input id="select_menu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" type="text" readonly value="" class="form-control text-box single-line" />
    <i class="fa fa-angle-down dropdown-btn" name="menuBtn"></i>
</div>
<div id="menuContent@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" class="menuContent" style="display:none; position: absolute;z-index: 999;">
    <ul id="treeDemo@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" class="ztree" style="margin-top:0;"></ul>
</div>
<script type="text/javascript">
    var setting@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)) = {
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            //beforeClick: beforeClick,
            onClick: onClick@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))
        }
    };

    var zNodes@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)) = [
        @foreach (var item in (List<SelectMenuModel>)ViewData["SelectList"])
	    {
                <text>
                    { id: @item.id, pId: @item.pId, name: "@Html.Raw(item.name)", open:'@item.open','class':'curSelectedNode' },
                </text>
	    }
    ];

    function onClick@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))"),
        nodes = zTree.getSelectedNodes(),
        v = "";
        nodes.sort(function compare(a, b) { return a.id - b.id; });
        for (var i = 0, l = nodes.length; i < l; i++) {
            v += nodes[i].name + ",";
            $("#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)").val(nodes[i].id);
            // 触发change
            $("#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)").trigger('change');
        }
        if (v.length > 0) v = v.substring(0, v.length - 1);
        var cityObj = $("#select_menu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))");
        cityObj.attr("value", v);
        hideMenu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))();
        ////不知为什么change监听不到值变化，暂时用该方法
        //var departId=$('#DepartmentId').val();
        //if (departId>0) {
        //    showgrades(departId);
        //}
    }

    function showMenu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))() {
        var cityObj = $("#select_menu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))");
        var cityOffset = $("#select_menu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").offsetParent();
        $("#menuContent@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
        $("#treeDemo@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").css({width:cityObj.outerWidth()+"px"});
        $("body").bind("mousedown", onBodyDown@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)));
    }
    function hideMenu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))() {
        $("#menuContent@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)));
    }
    function onBodyDown@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))(event) {
        if (!(event.target.id == "menuBtn@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" || event.target.id == "menuContent@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" || $(event.target).parents("#menuContent@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").length > 0)) {
            hideMenu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))();
        }
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))"), setting@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)), zNodes@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)));
        // 默认值
        const item = zNodes@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)).filter(m => m.id == @Model)[0];
        if (item)
        {
             $("#select_menu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").attr("value", item.name);
        }
    });
</script>
